<template>
    <el-descriptions title="采购单详情" border>
        <el-descriptions-item label="采购单号">{{ poMaster.id }}</el-descriptions-item>
        <el-descriptions-item label="采购日期">{{ poMaster.poDate }}</el-descriptions-item>
        <el-descriptions-item label="采购总价">¥ {{ poMaster.totalPrice }}</el-descriptions-item>
        <el-descriptions-item label="供应商">
            {{ poMaster.vendorName }}
        </el-descriptions-item>
        <el-descriptions-item label="采购人">
            {{ poMaster.purchaser }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">

            <el-tag type="success"> {{ poMaster.statusX }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">
            {{ poMaster.brief }}
        </el-descriptions-item>
        <el-descriptions-item label="操作">
            <el-button @click="approve" v-if="poMaster.status == 1" type="primary">同意</el-button>
            <el-button type="success" v-if="poMaster.status == 2">开始配送</el-button>
            <el-button type="primary" @click="saveIO" plain v-if="poMaster.status == 3">入库</el-button>
            <el-button v-auth:permission="`PO_REJECT`" type="danger" @click="reject"
                v-if="poMaster.status == 1">驳回</el-button>
            <el-button type="warning" @click="interrupt"
                v-if="poMaster.status != 20 && poMaster.status != 4">作废</el-button>
        </el-descriptions-item>
    </el-descriptions>
    <el-divider border-style="dashed" />

    <el-form :inline="true" :model="formData" v-if="poMaster.status == 3">
        <el-form-item label="入库人">
            <el-input v-model="formData.receiver" placeholder="请输入入库人" clearable />
        </el-form-item>

        <el-form-item label="入库日期">
            <el-date-picker v-model="formData.ioDate" type="date" placeholder="Pick a day" />
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="formData.brief" placeholder="请输入备注" clearable />
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="80" />
        <el-table-column fixed prop="productName" label="商品名称" show-overflow-tooltip width="180" />

        <el-table-column prop="qty" label="采购数量" width="100" />
        <el-table-column v-if="poMaster.status == 3" label="入库量" width="160">
            <template #default="scope">
                <el-input-number v-model="scope.row.realQty" :min="0" size="small" />
            </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="120">
            <template #default="scope">
                ¥ {{ scope.row.price }}
            </template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="总价" width="80">
            <template #default="scope">
                ¥ {{ scope.row.qty * scope.row.price }}
            </template>
        </el-table-column>
        <el-table-column v-if="poMaster.status == 3" prop="totalPrice" label="生产日期" width="170">
            <template #default="scope">
                <el-date-picker style="width: 140px;" v-model="scope.row.productionDate" type="date"
                    placeholder="Pick a day" />
            </template>
        </el-table-column>
        <el-table-column v-if="poMaster.status == 3" prop="totalPrice" label="保质期(天)" width="220">
            <template #default="scope">
                <el-input-number v-model="scope.row.shelfLife" :min="0" />
            </template>
        </el-table-column>
        <el-table-column v-if="poMaster.status == 3" prop="totalPrice" label="货架" width="250">
            <template #default="scope">

                <ShelfTree v-model="scope.row.shelfId"></ShelfTree>

            </template>
        </el-table-column>
        <el-table-column prop="brief" label="备注" width="280" />
        <el-table-column v-if="poMaster.status == 3" label="入库备注" width="150">
            <template #default="scope">
                <el-input type="textarea" v-model="scope.row.ioBrief" size="small" />
            </template>
        </el-table-column>

    </el-table>
</template>

<script setup lang="ts">

import ioApi from '@/api/ioApi'
import poItemApi from '@/api/poItem'
import ShelfTree from '@/components/ShelfTree.vue'
import { dayjs, ElMessage } from 'element-plus'
const formData = reactive({ ioDate: new Date(dayjs()), receiver: "张三", brief: "测试" })
const tableData = ref<any>([])
let id: any = ""
let poMaster: any = reactive({})
const route = useRoute()
onMounted(() => {
    id = route.query.id   // 获取路由参数 ？id=123 & name = 张三
    callApi()
})
const saveIO = () => {
    let b = tableData.value.some((item: { shelfId: number }) => item.shelfId == 0)
    if (b) {
        ElMessage.error("请选择货架")
        return
    }
    if (formData.receiver == "") {
        ElMessage.error("请输入入库人")
        return
    }

    let items: any = []
    tableData.value.forEach((item: any) => {
        items.push({
            productId: item.productId,
            productName: item.productName,
            qty: item.realQty,
            price: item.price,
            shelfId: item.shelfId,
            productionDate: item.productionDate,
            shelfLife: item.shelfLife,
            brief: item.ioBrief
        })
    })



    let body = {
        vendorId: poMaster.vendorId,
        vendorName: poMaster.vendorName,
        poId: poMaster.id,
        ioDate: formData.ioDate,
        receiver: formData.receiver,
        brief: formData.brief,
        items: items
    }
    ioApi.insert(body).then((res: any) => {
        ElMessage.success("入库完成")
        callApi()
    })
}
const approve = () => {
    poApi.approve({ id, res_id: "PO_APPROVE.BUTTON" }).then((res: any) => {
        if (res == 1) {
            ElMessage.success("审核通过")
            callApi()
        }



    })
}
const reject = () => {
    poApi.reject({ id }).then((res: any) => {
        ElMessage.success("驳回成功")
        callApi()
    })
}
const interrupt = () => {
    poApi.interrupt({ id }).then((res: any) => {
        ElMessage.success("已作废")
        callApi()
    })
}
const callApi = () => {
    poApi.select({ id }).then((res: any) => {

        poMaster.id = res[0].id
        poMaster.vendorId = res[0].vendorId
        poMaster.vendorName = res[0].vendorName
        poMaster.totalPrice = res[0].totalPrice
        poMaster.statusX = res[0].statusX
        poMaster.status = res[0].status
        poMaster.brief = res[0].brief
        poMaster.poDate = res[0].poDate
        poMaster.purchaser = res[0].purchaser



    })
    poItemApi.select({ poId: id }).then((res: any) => {

        res.forEach((item: any) => {
            item.realQty = item.qty
            item.ioBrief = ""
            item.productionDate = new Date(dayjs().add(-1, 'day'))
            item.shelfLife = 30
            item.shelfId = 0
        })

        tableData.value = res


    })
}

</script>